<template>
  <div class="commentlist">
    <!-- 发布评论  .trim   空格不能发布 -->
    <van-field
      v-model.trim="message"
      rows="2"
      autosize
      class="post-field"
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
    <van-button class="post-btn" :disabled="!message.length" @click="onlist"
      >发布</van-button
    >
    <!--：disabled  留言板内容为空也不能发布 -->
  </div>
</template>

<script>
import { addCommentList } from "@/api/comment";
export default {
  name: "CommentList",
  components: {},
  data() {
    return {
      message: "",
    };
  },
  inject: {
    articleId: {
      type: [Object, String, Number],
      default: null,
    },
  },
  props: {
    target: {
      type: [Object, String, Number],
      required: true,
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //   发布评论
    // 接口 请求数据  点击  成功添加列表  失败提示
    async onlist() {
      this.$toast.loading({
        message: "发布中",
        forbidClick: true,
        duration: 0,
      });
      try {
        // 因为动态路由并且传递id,他的组件可以用$route去获取
        const { data } = await addCommentList({
          target: this.target.toString(), //评论文章id
          content: this.message, //评论内容
          art_id: this.articleId?this.articleId.toString() : this.articleId, //文章id
        });
        // 校验是否排空
        // this.message.trim().length=0?
        // 输入框内容清空
        // 关闭弹层
        // 同步数据视图
        console.log(data);
        // 关闭弹出层
        // 发布内容添加列表顶部
        // 清空文本框
        this.message = "";
        this.$emit("post-success", data.data);
        this.$toast.success("发布成功");
      } catch (err) {
        this.$toast("发布失败");
      }
    },
  },
};
</script>

<style scoped lang="less">
.post-comment {
  display: flex;
  padding: 15px;
  align-items: flex-end;
  .post-field {
    background: #f5f7f9;
    margin-right: 15px;
  }
}
</style>
